<script setup>
  import { onMounted, ref, onUnmounted } from 'vue'
  const props = defineProps({
    seconds: {
      type: Number,
      default: 60,
    },
  })

  const emit = defineEmits(['timeup'])

  const remainingTime = ref(props.seconds)

  let timerId = null

  onMounted(() => {
    timerId = setInterval(() => {
      remainingTime.value--
      if (remainingTime.value === 0) {
        clearInterval(timerId)
        emit('timeup')
      }
    }, 1000)
  })

  onUnmounted(() => {
    clearInterval(timerId)
  })
</script>

<template>
  {{ remainingTime.toString().padStart(2, '0') }}
</template>

<style></style>
